<template>
  <div class="container">
    <header>
      <!-- <router-link to="/caifu" class="back-button">&lt;</router-link> -->
      <button @click="$router.go(-1)" class="back-button">&lt;</button>
      <!-- <div class="title">理财选品地图</div> -->
      <h1>财富社区</h1>
      <button class="more-button">···</button>
    </header>
    <!-- 搜索框 -->
    <van-search
      height="40px"
      class="search-bar"
      v-model="value"
      placeholder="重磅金融数据出炉；央行新增支农支小..."
      shape="round"
    />

    <!-- 标签栏 -->
    <van-tabs v-model:active="active">
      <van-tab title="推荐">
        <recommend @change-tab="goToInformation()"></recommend>
      </van-tab>
      <van-tab title="百科">
        <encyclopedia></encyclopedia>
      </van-tab>
      <van-tab title="资讯">
        <information></information>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import recommend from "./Three_title/recommend.vue";
import encyclopedia from "./Three_title/encyclopedia.vue";
import information from "./Three_title/information.vue";
import { ref } from "vue";

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
  name: "community",
  components: {
    recommend,
    encyclopedia,
    information,
  },
  created(){
    // 获取路由的 query 参数并设置为激活的 Tab
    const tabIndex = this.$route.query.tab;
    if (tabIndex !== undefined) {
      this.active = Number(tabIndex); // 将传递的 tab 参数转换为数字
    };

  },
  methods: {
    goToInformation() {
      this.active = 2; // 将 active 设置为“咨询”标签页的索引
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  /* max-width: 415px; */
  /* 模拟手机屏幕宽度 */
  margin: 0 auto;
  /* background-color: #fff; */
  /* padding: 10px; */
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
  background-image: url("./assets_community/背景图.svg");
  /* text-align: center; */
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* padding-bottom: 16px; */
}
h1 {
  padding: 0 20px;
  font-size: 20px;
  /* font-weight: bold; */
  color: #444;
}
.back-button {
  position: absolute;
  left: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}
.more-button {
  position: absolute;
  right: 0;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.search-bar {
  margin: 10px auto;
  padding: 1px;
  width: calc(100% - 30px);
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 14px;
  background-color: #fff;
}
</style>
